<template>
  <div class="report">
    <section class="form-item" v-if="!showFm">
      <label class="menu">生成数据范围</label>
      <div class="item-con">
        <el-radio v-model="dataScope" :disabled="!isSelect" label="select">选择的数据</el-radio>
        <el-radio v-model="dataScope" :disabled="!isSearch" label="search">查询的数据</el-radio>
        <el-radio v-model="dataScope" label="all">全部数据</el-radio>
      </div>
    </section>
    <section class="form-item">
      <label class="menu">报表范围</label>
      <div class="item-con">
        <el-radio v-model="idReport"
                  v-for="(item, index) in reportScope"
                  :key="index"
                  @change="handleChange(item)"
                  :label="item.id">{{item.reportName}}
        </el-radio>
      </div>
    </section>
    <section class="parameter" v-if="showFm">
      <hgroup>查询参数</hgroup>
      <el-form :model="ruleForm"
               status-icon
               :rules="rules"
               ref="ruleForm"
               label-width="110px"
               class="ruleForm">
        <el-form-item label="全宗" prop="qzh">
          <el-select v-model="ruleForm.qzh" style="width: 100%">
            <el-option v-for="(item, index) in qzDataSelect"
                       :key="index"
                       :value="item.fondsNo"
                       :label="item.fondsNo + ' ' + item.fondsName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年度" prop="gdnd">
          <el-date-picker
            v-model="ruleForm.gdnd[0]"
            type="year"
            value-format="yyyy"
            @change="handleYearChange"
            style="width: calc(50% - 10px)"
            placeholder="选择年">
          </el-date-picker>
          <span style="width: 20px;display: inline-block; text-align: center">-</span>
          <el-date-picker
            v-model="ruleForm.gdnd[1]"
            type="year"
            value-format="yyyy"
            @change="handleYearChange"
            style="width: calc(50% - 10px)"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保管期限" prop="bgqx">
          <el-select v-model="ruleForm.bgqx" style="width: 100%">
            <el-option v-for="(item, index) in bgqxDataSelect"
                       :key="index"
                       :value="item.dictLabel"
                       :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </section>
    <div class="btn-box">
      <el-button type="primary" :loading="loading" @click="handlePreviewPrint" size="small">预览并打印报表</el-button>
      <!--       <el-button type="primary" size="small">生成报表</el-button>-->
    </div>
  </div>
</template>

<script>

import { getQzDic } from '../../api/quanzong/quanzong'
import { getArchivesDicId } from '../../api/dictionary/dictionary'

export default {
  name: 'reportForm',
  props: {
    reportScope: {
      type: Array,
      default: () => ([])
    },
    loading: {
      type: Boolean,
      default: false
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      qzDataSelect: [],
      bgqxDataSelect: [],
      showFm: false,
      dataScope: '',
      idReport: '',
      ruleForm: {
        qzh: '',
        qzmc: '',
        gdnd: [],
        bgqx: ''
      },
      rules: {
        qzh: [{
          required: true, message: '请选择全宗', trigger: 'blur'
        }],
        gdnd: [{
          required: true, message: '请选择归档年度', trigger: 'blur'
        }],
        bgqx: [{
          required: true, message: '请选择保管期限', trigger: 'blur'
        }]
      }
    }
  },
  watch: {
    isSelect () {
      this.dataScope = ''
    },
    isSearch () {
      this.dataScope = ''
    }
  },
  mounted () {
    this.getSelectData()
  },
  methods: {
    getSelectData () {
      getQzDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        this.qzDataSelect = res.data.data.list
      })
      getArchivesDicId('retention_type').then(res => {
        this.bgqxDataSelect = res.data.data
      })
    },
    handleChange (item) {
      this.showFm = item.reportName.indexOf('封面') >= 0
    },
    handleYearChange () {
      this.ruleForm.gdnd.sort()
    },
    handlePreviewPrint () {
      if (!this.showFm) {
        if (!this.dataScope) {
          this.$message.warning('请选择生成数据范围！')
          return
        }
      }
      if (!this.idReport) {
        this.$message.warning('请选择报表范围！')
        return
      }
      const param = {
        dataScope: this.dataScope,
        idReport: this.idReport
      }
      if (this.showFm) {
        param.data = this.ruleForm
        param.dataScope = 'search'
        this.qzDataSelect.map(item => {
          if (item.fondsNo === this.ruleForm.qzh) {
            this.ruleForm.qzmc = item.fondsName
          }
        })

        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$emit('handlePreviewPrint', param)
          } else {
            return false
          }
        })
      } else {
        this.$emit('handlePreviewPrint', param)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .report {
    .form-item {
      display: flex;
      justify-content: flex-start;
      padding: 15px 0;

      .menu {
        width: 100px;
        text-align: right;
        color: #333;
      }

      .item-con {
        width: calc(100% - 120px);
        margin-left: 20px;

        .info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 15px;

          .num {
            margin: 0 80px;
          }
        }
      }
    }

    .btn-box {
      text-align: right;
      margin: 20px;
    }
  }

  .parameter {
    padding: 15px 0;
    margin-top: 15px;
    border-top: 1px solid #e7e7e7;
    hgroup {
      color: #000;
      font-size: 16px;
      font-weight: bolder;
      padding-left: 15px;
      padding-bottom: 35px;
    }
    .ruleForm{
      padding-right: 50px;
    }
  }
</style>
